<!-- 开展 -->
<template>
  <img v-if="isTitle" src="@/assets/xinshuoImages/line.png" alt="" style="width: 100%" />
  <div ref="tabStartWork" class="box">
    <div class="seq">
      <div class="line1"></div>
      <div class="txt">开展作业</div>
      <div class="line2"></div>
    </div>
    <div class="center">
      <div class="oneCenter">
        <div class="leftBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">01</p>
            </div>
            <TitleAndLogo
              title="确认轨温"
              img-url1="AI.png"
              style="width: 145px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <div class="videoBox">
            <img src="@/assets/xinshuoImages/openWork1.png" alt="" class="video" />
            <!-- 定位状态 -->
            <div class="fixStatus">
              <div v-for="item in statusArr.status1" :key="item" class="oneStatus">
                <TitleAndstatus :title="item" />
              </div>
            </div>
          </div>
        </div>
        <div class="rightBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">02</p>
            </div>
            <TitleAndLogo
              title="确定预留轨缝"
              img-url1="AI.png"
              style="width: 175px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <div class="videoBox">
            <video src="http://10.1.6.42:81/film/openWork-2.mp4" class="video" muted autoplay controls loop></video>
            <img src="@/assets/xinshuoImages/openWorkModel.png" alt="" class="WorkModel" />
            <!-- 定位状态 -->
            <div class="fixStatus">
              <div v-for="item in statusArr.status2" :key="item" class="oneStatus">
                <TitleAndstatus :title="item" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--  3-->
      <div class="oneCenter">
        <div class="leftBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">03</p>
            </div>
            <TitleAndLogo
              title="确定换轨长度"
              img-url1="AI.png"
              style="width: 175px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <div class="videoBox">
            <video src="http://10.1.6.42:81/film/openWork-3.mp4" class="video" muted autoplay controls loop></video>
            <!-- 定位状态 -->
            <div class="fixStatus">
              <div v-for="item in statusArr.status3" :key="item" class="oneStatus">
                <TitleAndstatus :title="item" />
              </div>
            </div>
            <!-- 定位表格 -->
            <table class="fixTable">
              <tr style="color: #eee">
                <td>序号</td>
                <td>预防措施</td>
                <td>接受状态</td>
              </tr>
              <tr>
                <td>1</td>
                <td>不得连续插入2根及以上钢轨</td>
                <td class="success">
                  <img src="@/assets/xinshuoImages/greenStatus1.png" alt="" />
                  <p>收到</p>
                </td>
              </tr>
              <tr>
                <td>2</td>
                <td>更换钢轨长度应预留2倍焊缝值</td>
                <td class="success">
                  <img src="@/assets/xinshuoImages/greenStatus1.png" alt="" />
                  <p>收到</p>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="rightBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">04</p>
            </div>
            <TitleAndLogo
              title="检查新钢轨"
              img-url1="PDA.png"
              style="width: 160px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <div class="gangguiBox">
            <titleAndBcg v-for="item in checkList" :key="item" :item="item" />
          </div>
        </div>
      </div>
      <!-- 5 -->
      <div class="oneCenter">
        <div class="leftBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">05</p>
            </div>
            <TitleAndLogo
              title="设置铜导线"
              img-url1="AI.png"
              style="width: 160px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <div class="videoBox">
            <video src="http://10.1.6.42:81/film/openWork-5.mp4" class="video" muted autoplay controls loop></video>
            <!-- 定位状态 -->
            <div class="fixStatus">
              <div v-for="item in statusArr.status5" :key="item" class="oneStatus">
                <TitleAndstatus :title="item" />
              </div>
            </div>
          </div>
        </div>
        <div class="rightBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">06</p>
            </div>
            <TitleAndLogo
              title="断开线上钢轨"
              img-url1="AI.png"
              style="width: 175px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <div class="videoBox">
            <video src="http://10.1.6.42:81/film/openWork-6.mp4" class="video" muted autoplay controls loop></video>
            <!-- 定位状态 -->
            <div class="fixStatus">
              <div v-for="item in statusArr.status6" :key="item" class="oneStatus">
                <TitleAndstatus :title="item" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 7 -->
      <div class="oneCenter">
        <div class="leftBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">07</p>
            </div>
            <TitleAndLogo
              title="复核新轨长度"
              img-url1="PDA.png"
              style="width: 176px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <div class="videoBox">
            <video src="http://10.1.6.42:81/film/openWork-7.mp4" class="video" muted autoplay controls loop></video>
            <!-- 定位状态 -->
            <div class="fixStatus">
              <div v-for="item in statusArr.status7" :key="item" class="oneStatus">
                <TitleAndstatus :title="item" />
              </div>
            </div>
            <!-- 定位表格 -->
            <table class="fixTable">
              <tr>
                <td>复核人</td>
                <td>第一次复核时间</td>
                <td>第二次复核时间</td>
                <td>复核结果</td>
              </tr>
              <tr>
                <td>张三</td>
                <td>XX时XX分</td>
                <td>XX时XX分</td>
                <td class="success">
                  <img src="@/assets/xinshuoImages/greenStatus1.png" alt="" />
                  <p>合格</p>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="rightBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">08</p>
            </div>
            <TitleAndLogo
              title="锯切新轨"
              img-url1="AI.png"
              style="width: 148px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <div class="videoBox">
            <img src="@/assets/xinshuoImages/openWork8.png" alt="" class="video" />
            <!-- 定位状态 -->
            <div class="fixStatus">
              <div v-for="item in statusArr.status8" :key="item" class="oneStatus">
                <TitleAndstatus :title="item" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 9 -->
      <div class="oneCenter">
        <div class="leftBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">09</p>
            </div>
            <TitleAndLogo
              title="推运新钢轨"
              img-url1="PDA.png"
              style="width: 161px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <div class="videoBox">
            <img src="@/assets/xinshuoImages/openWork9.png" alt="" class="video" />
            <!-- 定位状态 -->
            <div class="fixStatus">
              <div v-for="item in statusArr.status9" :key="item" class="oneStatus">
                <TitleAndstatus :title="item" />
              </div>
            </div>
          </div>
        </div>
        <div class="rightBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">10</p>
            </div>
            <TitleAndLogo
              title="拔出旧轨"
              img-url1="AI.png"
              style="width: 148px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <div class="videoBox">
            <video src="http://10.1.6.42:81/film/openWork-10.mp4" class="video" muted autoplay controls loop></video>
            <!-- 定位状态 -->
            <div class="fixStatus">
              <div v-for="item in statusArr.status10" :key="item" class="oneStatus">
                <TitleAndstatus :title="item" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 11，12 -->
      <div class="oneCenter">
        <div class="leftBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">11</p>
            </div>
            <TitleAndLogo
              title="新轨入槽"
              img-url1="AI.png"
              img-url2="toTxt.png"
              style="width: 176px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <div class="videoBox">
            <video src="http://10.1.6.42:81/film/openWork-11.mp4" class="video" muted autoplay controls loop></video>
            <!-- 定位状态 -->
            <div class="fixStatus">
              <div v-for="item in statusArr.status11" :key="item" class="oneStatus">
                <TitleAndstatus :title="item" />
              </div>
            </div>
            <!-- 定位表格 -->
            <table class="fixTable">
              <tr style="color: #eee">
                <td>序号</td>
                <td>作业要求</td>
                <td>接受状态</td>
              </tr>
              <tr v-for="item in 2" :key="item">
                <td>{{ item }}</td>
                <td>轨缝设置需均匀</td>
                <td class="success">
                  <img src="@/assets/xinshuoImages/greenStatus1.png" alt="" />
                  <p>收到</p>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="rightBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">12</p>
            </div>
            <TitleAndLogo
              title="连接钢轨"
              img-url1="AI.png"
              img-url2="toTxt.png"
              style="width: 148px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <div class="videoBox">
            <video src="http://10.1.6.42:81/film/openWork-12.mp4" class="video" muted autoplay controls loop></video>
            <!-- 定位状态 -->
            <div class="fixStatus">
              <div v-for="item in statusArr.status12" :key="item" class="oneStatus">
                <TitleAndstatus :title="item" />
              </div>
            </div>
            <!-- 定位表格 -->
            <table class="fixTable">
              <tr>
                <td style="width: 40px">序号</td>
                <td>作业要求</td>
                <td style="width: 78px">接受状态</td>
              </tr>
              <tr v-for="item in 2" :key="item">
                <td>{{ item }}</td>
                <td>接头轨面及作用边错牙，正线、到发线不大于1mm ，其他站线不大于2mm</td>

                <td class="success">
                  <img src="@/assets/xinshuoImages/greenStatus1.png" alt="" />
                  <p>收到</p>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <!-- 13 -->
      <div class="oneCenter">
        <div class="leftBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">13</p>
            </div>
            <TitleAndLogo
              title="调整轨距"
              img-url1="AI.png"
              img-url2="toTxt.png"
              style="width: 146px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <!-- 播报情况 -->
          <titleAndBcg item="作业要求播报完整" style="margin-top: 25px; margin-bottom: 20px" />
          <el-table
            ref="table"
            class="hd-table"
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="{
              background: '#EEF5FF',
              textAlign: 'center',
              color: '#111',
            }"
          >
            <el-table-column prop="seq" label="序号" />
            <el-table-column prop="work" label="作业要求" width="448px" />
            <el-table-column prop="receiveStatus" label="接收状态">
              <template #default>
                <div class="success">
                  <img src="@/assets/xinshuoImages/greenStatus1.png" alt="" />
                  <p>收到</p>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="rightBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">14</p>
            </div>
            <TitleAndLogo
              title="拧紧扣件"
              img-url1="AI.png"
              img-url2="toTxt.png"
              style="width: 146px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <!-- 播报情况 -->
          <titleAndBcg item="作业要求播报完整" style="margin-top: 25px; margin-bottom: 20px" />
          <el-table
            ref="table1"
            class="hd-table"
            :data="tableData1"
            border
            style="width: 100%"
            :header-cell-style="{
              background: '#EEF5FF',
              textAlign: 'center',
              color: '#111',
            }"
          >
            <el-table-column prop="seq" label="序号" />
            <el-table-column prop="work" label="作业要求" width="448px" />
            <el-table-column prop="receiveStatus" label="接收状态">
              <template #default>
                <div class="success">
                  <img src="@/assets/xinshuoImages/greenStatus1.png" alt="" />
                  <p>收到</p>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 15-16 -->
      <div class="oneCenter">
        <div class="leftBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">15</p>
            </div>
            <TitleAndLogo
              title="回检作业质量"
              img-url1="AI.png"
              img-url2="toTxt.png"
              style="width: 175px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <div class="videoBox">
            <video src="http://10.1.6.42:81/film/openWork-15.mp4" class="video" muted autoplay controls loop></video>
            <!-- 定位状态 -->
            <div class="fixStatus">
              <div v-for="item in statusArr.status15" :key="item" class="oneStatus">
                <TitleAndstatus :title="item" />
              </div>
            </div>
          </div>
        </div>
        <div class="rightBox">
          <p class="rightTxt">回检测试单</p>
          <div class="checkPdf">
            <div class="left">
              <img src="@/assets/xinshuoImages/PDF.png" alt="" />
              <p>关于XXXX的回检测试单</p>
            </div>
            <div class="check">查看</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { nextTick, reactive, ref } from 'vue'
import urls from '@/utils/url'
let props = defineProps({
  isTitle: {
    type: Boolean,
    default: true,
  },
})
//
let statusArr = reactive({
  status1: ['轨温55℃'],
  status2: ['预留轨缝18mm'],
  status3: ['换轨长度 5m > 4.5m', '控制措施播报完整'],
  status5: ['铜导线设置牢固'],
  status6: ['工具使用合规', '周围无人'],
  status7: ['新轨完成两次复核'],
  status8: ['工具使用合规', '周围无人'],
  status9: ['新轨放置在昨肩上'],
  status10: ['工具使用合规', '旧轨放置位置合规'],
  status11: ['未使用手抓方式', '作业要求播报完整'],
  status12: ['周围无人', '作业要求播报完整'],
  status15: ['完成回检作业'],
})
let checkList = reactive(['新钢轨无损伤', '线上钢轨与线下新轨型号一致', '长度及眼孔与计划相符'])
// 13-14
const tableData = reactive([
  { seq: 1, work: '线路轨距不得超+6mm、-2m m' },
  { seq: 2, work: '道岔轨距不得超+3mm、-2mm' },
  { seq: 3, work: '轨距拉杆铁卡无离缝' },
  { seq: 4, work: '道岔轨距不得超+3mm、-2mm' },
  { seq: 5, work: '道岔轨距不得超+3mm、-2mm' },
  { seq: 6, work: '道岔轨距不得超+3mm、-2mm' },
])
const tableData1 = reactive([
  {
    seq: 1,
    work: '弹条扣件的弹条中部前端下颚应靠贴轨距挡板 (离缝不大于1mm) 或扭矩应保持 在80-150N·m未按规定安装好接头夹板、螺栓、轨撑、顶铁、轨枕扣件，将造成行车故障',
  },
  {
    seq: 2,
    work: '弹条扣件的弹条中部前端下颚应靠贴轨距挡板 (离缝不大于1mm) 或扭矩应保持 在80-150N·m未按规定安装好接头夹板、螺栓、轨撑、顶铁、轨枕扣件，将造成行车故障',
  },
  {
    seq: 3,
    work: '弹条扣件的弹条中部前端下颚应靠贴轨距挡板 (离缝不大于1mm) 或扭矩应保持 在80-150N·m未按规定安装好接头夹板、螺栓、轨撑、顶铁、轨枕扣件，将造成行车故障',
  },
  {
    seq: 4,
    work: '弹条扣件的弹条中部前端下颚应靠贴轨距挡板 (离缝不大于1mm) 或扭矩应保持 在80-150N·m未按规定安装好接头夹板、螺栓、轨撑、顶铁、轨枕扣件，将造成行车故障',
  },
  {
    seq: 5,
    work: '弹条扣件的弹条中部前端下颚应靠贴轨距挡板 (离缝不大于1mm) 或扭矩应保持 在80-150N·m未按规定安装好接头夹板、螺栓、轨撑、顶铁、轨枕扣件，将造成行车故障',
  },
])

const table = ref()
// 设置定时器
let timers
const scrollUp = (tableRef) => {
  const demo = tableRef.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
  const tableScroll = ref(true)
  demo.addEventListener('mouseover', () => {
    tableScroll.value = false
  })
  demo.addEventListener('mouseout', () => {
    tableScroll.value = true
  })
  timers = setInterval(() => {
    // if (tableScroll.value) {
    demo.scrollTop += 1
    if (demo.clientHeight + demo.scrollTop >= demo.scrollHeight - 5) {
      demo.scrollTop = 0
    }
    // }
  }, 60)
}
const table1 = ref()
// 设置定时器
let timers1
const scrollUp1 = (tableRef) => {
  const demo = tableRef.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
  const tableScroll = ref(true)
  demo.addEventListener('mouseover', () => {
    tableScroll.value = false
  })
  demo.addEventListener('mouseout', () => {
    tableScroll.value = true
  })
  timers1 = setInterval(() => {
    // if (tableScroll.value) {
    demo.scrollTop += 1
    if (demo.clientHeight + demo.scrollTop >= demo.scrollHeight - 5) {
      demo.scrollTop = 0
    }
    // }
  }, 60)
}
// el-tabs中间滚动
let tabStartWork = ref()
let tableScroll = ref(true)

onMounted(() => {
  nextTick(() => {
    scrollUp(table.value)
    scrollUp1(table1.value)
  })
})

onBeforeUnmount(() => {
  clearInterval(timers) // 销毁定时器
  clearInterval(timers1) // 销毁定时器
})

defineExpose({
  tabStartWork,
  tableScroll,
})
</script>

<style lang="scss" scoped>
@import '@/styles/centerStyle.scss';
.box {
  // overflow-y: auto;
  // overflow-x: hidden;
  display: flex;
  margin-top: 20px;
  height: 100% !important;
}
.seq {
  height: 3732px !important;
  .line2 {
    height: 58% !important;
  }
}
.center {
  flex-wrap: wrap;
}
.hd-table {
  height: 235px;
  text-align: center;
}

.gangguiBox {
  width: 100%;
  height: 404px;
  background: rgba(245, 245, 245, 0.5);
  padding: 85px 75px 86px 94px;
}
// 视频上定位表格
.fixTable {
  text-align: center;
  font-size: 16px;
  font-family:
    Source Han Sans CN-Regular,
    Source Han Sans CN;
  font-weight: 400;
  color: #fff;
  line-height: 23px;
  width: 100%;
  position: absolute;
  bottom: 0;
  margin: auto;
  height: 56px;
  background: rgba(0, 0, 0, 0.4);
}
.success {
  display: flex;
  align-items: center;
  justify-content: center;
  p {
    color: #00be1b;
    margin-left: 7px;
  }
}
.WorkModel {
  position: absolute;
  bottom: 0;
  right: 0;
}
// el-table
:deep(.el-table) {
  font-size: 16px !important;
}

// 15-16
.rightBox {
  .rightTxt {
    margin-top: 94px;
    font-size: 22px;
    font-family:
      Source Han Sans CN-Medium,
      Source Han Sans CN;
    font-weight: 500;
    color: #111111;
    line-height: 32px;
    margin-bottom: 30px;
  }
  .checkPdf {
    width: 549px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 157px;
    padding: 20px 19px 20px 30px;
    background: url('@/assets/xinshuoImages/checkTest.png') no-repeat center/100% 100%;
    .left {
      display: flex;
      align-items: center;
      > p {
        font-size: 24px;
        font-family:
          Source Han Sans CN-Regular,
          Source Han Sans CN;
        font-weight: 400;
        color: #111111;
        margin-left: 23px;
      }
    }
    .check {
      width: 84px;
      height: 40px;
      background: url('@/assets/xinshuoImages/checkRound.png') no-repeat center/100% 100%;
      font-size: 16px;
      font-family:
        Source Han Sans CN-Regular,
        Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      line-height: 40px;
      text-align: center;
    }
  }
}
</style>
